<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            list-style: none;
        }
        
        #container {
            overflow: hidden;
            margin: 6.25rem auto;
            width: 13rem;
            height: 27.8125rem;
            border-radius: 2rem;
            /* border: 0.0625rem solid red; */
            background: url(img/iphone.png) no-repeat;
        }
        
        #container .show {
            /* line-height: 2.5rem; */
            margin-top: 3.125rem;
            margin-left: 0.625rem;
            width: 11.875rem;
            height: 18.75rem;
            overflow: auto;
            /* border: 0.0625rem solid red; */
        }
        
        #container .show ul li {
            width: 100%;
            height: 2.25rem;
            /* background: red; */
        }
        
        #container .show ul li img {
            /* float: left; */
            /* display: inline-block; */
            /* padding: 0.625rem; */
            width: 2.25rem;
            height: 2.0625rem;
            vertical-align: middle;
            /* margin: 0.625rem; */
        }
        
        #container .show ul li span {
            line-height: 2.25rem;
            /* height: 2.25rem; */
            /* border: 0.0625rem solid red; */
            background: skyblue;
            border-radius: 0.5rem;
            font-size: 0.75rem;
        }
        
        #container .char {
            clear: both;
            margin-left: 0.625rem;
            width: 11.875rem;
            height: 2.25rem;
            /* border: 0.0625rem solid red; */
        }
        
        #container .char .head_photo {
            float: left;
            cursor: pointer;
            width: 2.125rem;
            height: 2.125rem;
            /* border: 0.0625rem solid red; */
        }
        
        #container .char .head_photo img {
            float: left;
            max-width: 100%;
        }
        
        #container .char input {
            float: left;
            width: 6.875rem;
            height: 2.125rem;
            font-size: 0.75rem;
            border-radius: 0.5rem;
            border: 0.0625rem solid#ccc;
            background: #f7f7f7;
        }
        
        #container .char input:focus {
            border: 0.0625rem solid rgb(47, 161, 255);
        }
        
        #container .char button {
            float: left;
            width: 2.5rem;
            height: 2.125rem;
            border-radius: 0.5rem;
            /* border: 0.0625rem solid red; */
        }
        
        #content li img.imgLeft {
            float: left;
        }
        
        #content li img.imgRight {
            float: right;
        }
        
        #content li span.spanLeft {
            float: left;
        }
        
        #content li span.spanRight {
            float: right;
        }
    </style>
</head>

<body>
    <div id="container">
        <aside class="show">
            <ul id="content">

            </ul>
        </aside>
        <aside class="char">
            <div class="head_photo">
                <img src="img/1.png" alt="头像" id="head_img" />
            </div>

            <input type="text" name="user_info" id="user_info">

            <button id="send_btn">发送</button>
        </aside>
    </div>
    <script>
        /*       思路分析：
                1.点击图片实现用户切换功能
                    1-1 默认两个用户，通过点击来回切换
                2.点击发送按钮，把用户的聊天内容展示聊天区域
                    2-1 点击发送按钮，把聊天内容展示在聊天区域
                    2-2 设定聊天在聊天区域不同位置显示 */
        let send_btn = document.getElementById("send_btn");
        let user_info = document.getElementById("user_info");
        let head_img = document.getElementById("head_img");
        let content = document.getElementById("content");
        let tag = 0;
        let arr = ["img/1.png", "img/2.png"];
        console.log(content);
        head_img.onclick = function() {
                // console.log(head_img.src);
                if (tag == 0) {
                    head_img.src = arr[1];
                    tag = 1;
                    console.log(head_img.src);
                } else {
                    head_img.src = arr[0];
                    tag = 0;
                    console.log(head_img.src);
                }
            }
            //记录聊天次数
        let num = -1;
        send_btn.onclick = function() {
            // 判断用户内容是否为空
            let text = user_info.value;
            if (text == "") {
                alert("聊天内容不能为空");
            } else {
                // 把用户内容添加到聊天区域内 
                content.innerHTML += '<li><img src=\"' + arr[tag] + '\"/><span>' + text + "</span></li>";
            }

            let imgs = content.getElementsByTagName("img");
            let span = content.getElementsByTagName("span")
                //判断当前聊天的用户
            num++;
            if (tag == 0) {
                imgs[num].className = "imgLeft";
                span[num].className = "spanLeft";
            } else {
                imgs[num].className = "imgRight";
                span[num].className = "spanRight";
            }
            document.getElementById("user_info").value = "";
        }
    </script>
</body>

</html>